<script setup lang="ts">
import { reactive, ref, unref, watch } from 'vue'
import { Form } from '@/components/Form'
import { useI18n } from '@/hooks/web/useI18n'
import { useForm } from '@/hooks/web/useForm'
import { loginApi } from '@/api/login'
import { useRouter } from 'vue-router'
import type { RouteLocationNormalizedLoaded} from 'vue-router'
import { UserLoginVO } from '@/api/login/types'
import { useValidator } from '@/hooks/web/useValidator'
import { FormSchema } from '@/types/form'
import * as authUtil from '@/utils/auth'

const { required } = useValidator()

const { currentRoute, push } = useRouter()

const { t } = useI18n()

const rules = {
  username: [required()],
  password: [required()]
}

const schema = reactive<FormSchema[]>([
  {
    field: 'title',
    colProps: {
      span: 24
    }
  },
  {
    field: 'username',
    label: t('login.username'),
    value: 'admin',
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps: {
      placeholder: t('login.usernamePlaceholder')
    }
  },
  {
    field: 'password',
    label: t('login.password'),
    value: 'admin',
    component: 'InputPassword',
    colProps: {
      span: 24
    },
    componentProps: {
      style: {
        width: '100%'
      },
      placeholder: t('login.passwordPlaceholder')
    }
  },
  {
    field: 'login',
    colProps: {
      span: 24
    }
  },

])

const { register, elFormRef, methods } = useForm()
const loading = ref(false)
const redirect = ref<string>('')

watch(
  () => currentRoute.value,
  (route: RouteLocationNormalizedLoaded) => {
    redirect.value = route?.query?.redirect as string
  },
  {
    immediate: true
  }
)

// 登录
const signIn = async () => {
  const formRef = unref(elFormRef)
  await formRef?.validate(async (isValid) => {
    if (isValid) {
      loading.value = true
      const { getFormData } = methods
      const formData = await getFormData<UserLoginVO>()
      formData.tenantName = '芋道源码';
      formData.rememberMe = true;
      try {
        const res = await loginApi(formData)
        console.log(res)
        if (!res) {
          return
        }
        authUtil.setToken(res)

        console.log("redirect-->", redirect.value)
        if (!redirect.value) {
          redirect.value = '/'
        }
        push({ path: redirect.value})

      } finally {
        loading.value = false
      }
    }
  })
}

</script>

<template>
  <Form :schema="schema" :rules="rules" label-position="top" hide-required-asterisk size="large"
    class="dark:(border-1 border-[var(--el-border-color)] border-solid)" @register="register">
    <template #title>
      <h2 class="text-2xl font-bold text-center w-[100%]">{{ t('login.login') }}</h2>
    </template>

    <!-- <template #tool>
        <div class="flex justify-between items-center w-[100%]">
          <ElCheckbox v-model="remember" :label="t('login.remember')" size="small" />
          <ElLink type="primary" :underline="false">{{ t('login.forgetPassword') }}</ElLink>
        </div>
      </template> -->

    <template #login>
      <div class="w-[100%]">
        <el-button :loading="loading" type="primary" class="w-[100%]" @click="signIn">
          {{ t('login.login') }}
        </el-button>
      </div>
    </template>
  </Form>
</template>

<style lang="less" scoped>
:deep(.anticon) {
  &:hover {
    color: var(--el-color-primary) !important;
  }
}
</style>
